<script setup>
import { ref, onBeforeMount } from 'vue'
let websocketUrl = ref()
let msg = ref()
let ws = null
let reciveMsg = ref()

const sendMsg = () => {
    ws.send(msg.value)
}
onBeforeMount(() => {
  // 创建websocket
  const websocketUrl = "ws://127.0.0.1:8080/api/tools/ping"
  ws = new WebSocket(websocketUrl);
  ws.onopen = function() {console.log("链接建立时的事件")}
  ws.onmessage = function(msgContent) {
    console.log("接收到消息时的事件",msgContent.data)
    reciveMsg.value = msgContent.data
  }
  ws.onerror = function() {console.log("链接出现错误的事件")}
  ws.close = function() {
    console.log("关闭socket链接时的事件")
    ws.close()
  }
})
</script>
<template>
    <el-input v-model="websocketUrl" placeholder="请填写ws服务器地址 默认ws://127.0.0.1:8080/api/tools/ping" style="width: 500px;"></el-input>
    <div>
        <el-input v-model="msg" placeholder="请填写要发送的消息" style="width: 400px;margin: 20px 25px;"></el-input>
        <el-button type="success" @click="sendMsg()">发送</el-button>
    </div>
    接收到的消息:<span>{{ reciveMsg }}</span>
</template>
<style scoped>
</style>